
<template>
  <div class="slider">
    <div class="item" v-for="(item, index) in sliderList" :key="index">
      <img :src="item.img" alt="" />
      <span>￥{{ item.pic }}</span>
    </div>
    <div class="more"><span>⬅</span><p>查看更多</p></div>
  </div>
</template>

<script>
export default {
  props: {
    sliderList: {
      type: Array,
    },
  },
};
</script>

<style scoped lang='scss'>
.slider {
  display: flex;
  align-items: center;
    background: #FFF;
    overflow-x: scroll;
  .item {
    width: 25%;
    margin-right: 50px;
  }
  img{
    width: 250px;
  }
  .more{
    background:#F6F6F6 ;
    span{
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border-radius: 50%;
        background: red;
        color: white;
    }
  }
}
</style>